<template>
  <div class="basic-box">
    <div class="header">
      <div class="left">
        <el-image class="cover" :src="orgDetail.logo" style="width: 200px" />
        <div>
          <div v-for="(item,index) in orgMap" :key="index" class="cell">
            <div v-if="item.key !== 'intro'" class="title">
              {{ item.title }} :&nbsp;
            </div>
            <div v-if="item.key !== 'intro'" class="content">
              {{ orgDetail[item.key] }}
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <el-button icon="el-icon-edit" type="primary" @click="toEditMode">编辑</el-button>
      </div>
    </div>
    <div class="summary">
      <div class="summary-title">
        社团简介 :
      </div>
      <div class="summary-content">
        {{ orgDetail.intro }}
      </div>
    </div>
    <div id="memberList" class="container-box">
      <div class="table-title text-primary"> 参与成员</div>
      <div class="filter-container" style="display: flex; flex-direction: row;justify-content: flex-end">
        <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="addDialogFormVisible = true;getAddDialogList()">
          添加成员
        </el-button>
        <el-button :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownloadMemberList">
          下载数据
        </el-button>
      </div>
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="memberList"
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="#学号" prop="id" sortable="custom" align="center" width="100">
          <template slot-scope="{row}">
            <span>{{ row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="姓名" width="110px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.username }}</span>
          </template>
        </el-table-column>
        <el-table-column label="性别" align="center" width="95">
          <template slot-scope="{row}">
            <span>{{ row.gender }}</span>
          </template>
        </el-table-column>
        <el-table-column label="班级" align="center" width="95">
          <template slot-scope="{row}">
            <span>{{ row.uclass }}</span>
          </template>
        </el-table-column>
        <el-table-column label="职位" align="center" min-width="100px">
          <template slot-scope="{row}">
            <span>{{ row.position }}</span>
          </template>
        </el-table-column>

        <el-table-column label="Status" class-name="status-col" width="100">
          <template slot-scope="{row}">
            <el-tag :type="row.status | statusFilter">
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="Actions" align="center" width="170" class-name="small-padding fixed-width">
          <template slot-scope="{row,$index}">
            <el-button type="primary" size="mini" @click="toDetail(row.id)">
              详情
            </el-button>
            <el-button size="mini" type="danger" @click="handleDelete(row,$index,'member')">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="listQuery.memberList.total > 0" :total="listQuery.memberList.total" :page.sync="listQuery.memberList.page" :limit.sync="listQuery.memberList.limit" @pagination="getMemberList" />
    </div>
    <div id="expUseChart" class="container-box" style="display: flex;flex-direction: column;">
      <div id="chart" style="width: 100%;height: 400px" />
    </div>
    <div id="expUseList" class="container-box">
      <div class="table-title text-primary"> 报销记录</div>
      <div class="filter-container">
        <el-input v-model="listQuery.expUseList.title" placeholder="查询内容" style="width: 200px;" class="filter-item" @keyup.enter.native="getExpUseList" />
        <el-select v-model="listQuery.expUseList.type" placeholder="查询类型" clearable class="filter-item" style="width: 130px;margin-left: 10px;">
          <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
        </el-select>
        <el-select v-model="listQuery.expUseList.status" placeholder="报销状态" clearable class="filter-item" style="width: 130px;margin-left: 10px;" @change="getExpUseList">
          <el-option v-for="item in calendarStatusOptions" :key="item.key" :label="item.display_name" :value="item.display_name" />
        </el-select>
        <el-button v-waves class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-search" @click="getExpUseList">
          搜索
        </el-button>
        <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreateExpUse">
          添加报销记录
        </el-button>
        <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownloadUseList">
          下载数据
        </el-button>
      </div>

      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="expUseList"
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="#编号" prop="id" sortable="custom" align="center" width="100">
          <template slot-scope="{row}">
            <span>{{ row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="报销人" width="110px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.username }}</span>
          </template>
        </el-table-column>
        <el-table-column label="社团" width="110px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.orgName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="班级" align="center" width="150px">
          <template slot-scope="{row}">
            <span>{{ row.uclass }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用途" min-width="110px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.reason }}</span>
          </template>
        </el-table-column>
        <el-table-column label="Date" width="150px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.date| parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="报销金额" width="110px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.total }}</span>
          </template>
        </el-table-column>
        <el-table-column label="Status" class-name="status-col" width="100">
          <template slot-scope="{row}">
            <el-tag :type="row.status | statusFilter">
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="Actions" align="center" width="230" class-name="small-padding fixed-width">
          <template slot-scope="{row,$index}">
            <el-button type="primary" size="mini" @click="toDetail(row.id)">
              详情
            </el-button>
            <el-button v-if="row.status === '申请中'" size="mini" type="warning" @click="handleCancelExpUse(row,$index)">
              撤销
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="listQuery.expUseList.total>0" :total="listQuery.expUseList.total" :page.sync="listQuery.expUseList.page" :limit.sync="listQuery.expUseList.limit" @pagination="getExpUseList" />
    </div>
    <el-dialog title="输入编辑内容" :visible.sync="isEditMode" width="50%" center>
      <!--      <span>-->
      <div v-for="(item,index) in orgMap" :key="index">
        <div v-if="item.key !=='intro' && item.key !== 'principal' && item.key !== 'num' && item.key !== 'status'" class="cell">
          <div class="title-edit">
            {{ item.title }} :&nbsp;
          </div>
          <div class="content">
            <el-input v-model="editData[item.key]" placeholder="请输入内容" />
          </div>
        </div>
        <div v-if="item.key ==='status'" class="cell">
          <div class="title-edit">
            {{ item.title }} :&nbsp;
          </div>
          <div class="content">
            <el-select v-model="editData[item.key]" placeholder="选择职状态" clearable class="filter-item" style="width: 130px;">
              <el-option v-for="item in statusOptions" :key="item" :label="item" :value="item" />
            </el-select>
          </div>
        </div>
        <div v-if="item.key ==='intro'" class="cell" style="align-items: flex-start;margin-top: 30px">
          <div class="title-edit">
            社团简介 :&nbsp;
          </div>
          <el-input v-model="editData.intro" style="width: 70%" type="textarea" :autosize="{ minRows: 4, maxRows: 8}" placeholder="请输入内容概要信息" />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isEditMode = false">撤 销 修 改</el-button>
        <el-button type="primary" @click="updateOrgData">确 定 修 改</el-button>
      </span>
    </el-dialog>
    <el-dialog title="删除确认" :visible.sync="deleteDialogFormVisible" style="width: 450px;margin: 0 auto" @close="cancelDelete">
      <div ref="dataForm" style="width: 100%;" class="text-danger">
        <span><i class="el-icon-warning-outline" /></span>
        删除数据将无法恢复
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDelete">
          取消
        </el-button>
        <el-button type="danger" @click="deleteData">
          确定
        </el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加成员" :visible.sync="addDialogFormVisible">
      <div class="filter-container" style="display: flex; flex-direction: row;justify-content: flex-end">
        <el-input v-model="listQuery.addDialog.title" :placeholder="'输入要添加的人员姓名'" style="width: 200px;" class="filter-item" />
        <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-search" @click="getAddDialogList">
          搜索
        </el-button>
      </div>
      <el-table v-loading="listLoading" :data="gridData">
        <el-table-column label="学号" prop="id" align="center" min-width="100">
          <template slot-scope="{row}">
            <span>{{ row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="姓名" prop="name" align="center" min-width="100">
          <template slot-scope="{row}">
            <span>{{ row.username }}</span>
          </template>
        </el-table-column>
        <el-table-column label="Actions" align="center" width="100" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button icon="el-icon-plus" type="success" size="mini" @click="handleAdd(row)" />
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="listQuery.addDialog.total>0" :total="listQuery.addDialog.total" :page-sizes="[5]" :page.sync="listQuery.addDialog.page" :limit.sync="listQuery.addDialog.limit" @pagination="getAddDialogList" />
    </el-dialog>
    <el-dialog title="变更职位" :visible.sync="positionDialogFormVisible">
      <el-form ref="dataForm" label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
        <el-form-item>
          <template slot="label" style="display: flex;flex-direction: row;align-items: center">
            社内职位：
          </template>
          <span v-if="dialogTemp.positionList != null && dialogTemp.positionList.length <= 0" class="text-info">暂无</span>
          <el-tag v-for="(item,index) in dialogTemp.positionList" :key="index" style="margin-right: 10px" closable type="success" @close="deletePosition(index)">{{ item.name }}</el-tag>
        </el-form-item>
        <el-form-item label="添加职位">
          <el-select v-model="positionTemp" placeholder="选择职位" clearable class="filter-item" style="width: 130px;">
            <el-option v-for="(item, index) in positionOptions" :key="index" :label="item.label" :value="item.value" />
          </el-select>
          <el-button icon="el-icon-plus" type="primary" circle style="margin-left: 10px" @click="addPosition" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="positionDialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="updateData">
          确定
        </el-button>
      </div>
    </el-dialog>
    <el-dialog title="报销" :visible.sync="expUseDialogFormVisible">
      <el-form ref="expUseForm" :rules="expUseDialogRules" :model="expUseDialogTemp" label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
        <el-form-item label="报销人" prop="userId">
          <el-select v-model="expUseDialogTemp.uid" class="filter-item" placeholder="Please select">
            <el-option v-for="(item,index) in memberList" :key="index" :label="item.username" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="用途">
          <el-input v-model="expUseDialogTemp.reason" />
        </el-form-item>
        <el-form-item label="金额" prop="total">
          <el-input v-model="expUseDialogTemp.total" />
        </el-form-item>
        <div class="text-danger">*发票在详情处设置</div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAddExpUse">
          取消
        </el-button>
        <el-button type="primary" @click="addExpUse">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import { fetchOrgInfo, fetchOrgMemberList, fetchOrgPositionOptions, deleteMember, updateOrg } from '@/api/com'
import { fetchMemberList, updateMember } from '@/api/member'
import { fetchOrgTotalUseChartData, fetchExpenditureList, addExpUse, updateExpUse } from '@/api/expenditure'
import waves from '@/directive/waves' // waves directive
import echarts from 'echarts'
import Pagination from '@/components/Pagination'
import { parseTime } from '@/utils/index'
import { getPositionId } from '@/api/role'
import { Message } from 'element-ui'

const calendarTypeOptions = [
  { key: 'name', display_name: '报销人姓名' },
  { key: 'username', display_name: '报销人用户名' }
]
const calendarStatusOptions = [
  { key: '0', display_name: '拒绝' },
  { key: '1', display_name: '申请中' },
  { key: '2', display_name: '接受' },
  { key: '3', display_name: '全选' }
]

export default {
  name: 'OrgDetail',
  components: { Pagination },
  directives: { waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        '接受': 'success',
        '申请中': 'info',
        '拒绝': 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    var validateTotal = (rule, value, callback) => {
      setTimeout(() => {
        var reg = /^\d+(?=\.{0,1}\d+$|$)/
        if (!reg.test(value)) { callback(new Error('请输入数字值')) }
        if (value > this.chartData.series[0].data[0].value) { callback(new Error('不能大于可支配金额')) } else return callback()
      }, 200)
    }
    return {
      id: this.$route.params.id,
      chart: null,
      isEditMode: false,
      downloadLoading: false,
      statusOptions: ['活跃', '离队', '退役'],
      name: '肥宅俱乐部',
      orgDetail: {
        name: '肥宅俱乐部',
        principal: 'Bo',
        num: 999,
        level: '校级社团',
        status: '活跃',
        intro: '',
        logo: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgss0.baidu.com%2F-Po3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2Fbd315c6034a85edf1ef4cc334a540923dd5475a1.jpg&refer=http%3A%2F%2Fgss0.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620506668&t=43008dd2f5e6b58ec562397499ed5c71'
      },
      calendarStatusOptions,
      calendarTypeOptions,
      listQuery: {
        memberList: {
          oid: -1,
          id: -1,
          page: 1,
          limit: 20,
          total: 0
        },
        addDialog: {
          page: 1,
          limit: 5,
          title: '',
          type: 'username',
          total: 0
        },
        expUseList: {
          oid: -1,
          page: 1,
          limit: 5,
          total: 0
        }
      },
      tableKey: 'id',
      listLoading: false,
      memberList: [],
      editData: {},
      expUseList: [],
      expUseDialogTemp: {},
      expUseDialogFormVisible: false,
      deleteDialogFormVisible: false,
      addDialogFormVisible: false,
      saveData: [],
      dialogTemp: {},
      positionTemp: '',
      gridData: [],
      positionOptions: null,
      positionDialogFormVisible: false,
      addType: '',
      categoryList: [
        { value: '0', label: '禁用' },
        { value: '1', label: '启用' }
      ],
      orgMap: [
        { key: 'name', title: '社团名称' },
        { key: 'principal', title: '负责人' },
        { key: 'num', title: '人数' },
        { key: 'level', title: '等级' },
        { key: 'status', title: '状态' },
        { key: 'intro', title: '简介' }
      ],
      expUseDialogRules: {
        total: { validator: validateTotal, trigger: 'blur' }
      },
      chartData: {
        title: {
          text: '经费使用情况',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 484, name: '配件' },
              { value: 300, name: '海报' },
              { value: 1048, name: '未使用' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  },
  computed: {
    parseTime
  },
  mounted() {
    this.id = this.$route.params && this.$route.params.id
    for (const i in this.listQuery) {
      this.listQuery[i]['id'] = this.id
    }
    this.fetchInfo()
    this.getMemberList()
    this.getExpUseList()
    this.initChart()
    fetchOrgPositionOptions(this.id).then(res => { this.positionOptions = res.data.items })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    toDetail(id) {
      this.$router.push({ path: '/member/detail/' + id })
    },
    setTagsViewTitle() {
      console.log(this.name)
      this.$route.meta.title = this.name
      const currentView = this.$store.getters.visitedViews[this.$store.getters.visitedViews.findIndex(
        (item) => item.path === this.$route.path
      )]
      if (currentView != null) {
        currentView.title = this.name
      }
    },
    setPageTitle() {
      document.title = `${this.name}`
    },
    fetchInfo() {
      fetchOrgInfo(this.id).then(
        res => {
          this.name = res.data.items.name
          this.setPageTitle()
          this.setTagsViewTitle()
          this.orgDetail = res.data.items
        }
      )
    },
    getMemberList() {
      this.listLoading = true
      fetchOrgMemberList(this.listQuery.memberList).then(res => {
        var list = res.data.items
        for (const i in list) {
          list[i]['org'] = ''
          list[i]['position'] = ''
          for (const j in list[i].roles) {
            list[i].org += list[i].roles[j].org.name + ', '
            list[i]['position'] += list[i].roles[j].org.name + list[i].roles[j].position + ', '
          }
          list[i].org = list[i].org.substring(0, list[i].org.lastIndexOf(','))
          list[i]['position'] = list[i].position.substring(0, list[i].position.lastIndexOf(','))
        }
        this.memberList = list
        this.listQuery.memberList.total = res.data.total

        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    getExpUseList() {
      this.listQuery.expUseList.oid = this.id
      fetchExpenditureList(this.listQuery.expUseList).then(
        res => {
          this.expUseList = res.data.items
          for (const i in this.expUseList) {
            this.expUseList[i].date = new Date(this.expUseList[i].date).getTime()
          }
          console.log(res.data.total)
          this.listQuery.expUseList.total = res.data.total
          setTimeout(() => {
            this.listLoading = false
          }, 500)
        }
      )
    },
    updateOrgData() {
      const tempData = Object.assign({}, this.editData)
      updateOrg(tempData).then((res) => {
        this.dialogFormVisible = false
        if (res.status === 200) {
          this.getList()
          this.initChart()
          this.$notify({
            title: 'Success',
            message: 'Update Successfully',
            type: 'success',
            duration: 2000
          })
        }
      })
    },
    getAddDialogList() {
      this.listLoading = true
      fetchMemberList(this.listQuery.addDialog).then(res => {
        var list = res.data.items
        for (const i in list) {
          list[i]['org'] = ''
          list[i]['position'] = ''
          for (const j in list[i].roles) {
            list[i].org += list[i].roles[j].org.name + ', '
            list[i]['position'] += list[i].roles[j].org.name + list[i].roles[j].position + ', '
          }
          list[i].org = list[i].org.substring(0, list[i].org.lastIndexOf(','))
          list[i]['position'] = list[i].position.substring(0, list[i].position.lastIndexOf(','))
        }
        this.gridData = list
        this.listQuery.addDialog.total = res.data.total
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    handleCreateExpUse() {
      this.expUseDialogFormVisible = true
    },
    handleCancelExpUse(row, index) {
      const temp = row
      temp.status = '拒绝'
      temp['uid'] = temp.user.id
      temp['oid'] = temp.org.id
      temp.total = String(temp.total)
      temp.date = parseTime(temp.date, '{y}-{m}-{d} {h}:{i}:{s}')
      console.log(temp)
      updateExpUse(temp).then(
        res => {
          if (res.status === 200) {
            this.getExpUseList()
            this.initChart()
            this.$notify({
              title: 'Success',
              message: 'add Successfully',
              type: 'success',
              duration: 500
            })
          }
        }
      )
    },
    handleAddPosition() {
      this.positionDialogFormVisible = true
    },
    cancelAddExpUse() {
      this.expUseDialogFormVisible = false
      this.expUseDialogTemp = {}
    },
    addExpUse() {
      this.$refs.expUseForm.validate(valid => {
        console.log(valid)
        if (valid) {
          this.expUseDialogFormVisible = false
          const form = Object.assign({}, this.expUseDialogTemp)
          form['oid'] = Number(this.id)
          addExpUse(form).then(
            res => {
              if (res.status === 200) {
                this.getExpUseList()
                this.fetchInfo()
                this.initChart()
                this.expUseDialogTemp = {}
                this.$notify({
                  title: 'Success',
                  message: 'add Successfully',
                  type: 'success',
                  duration: 500
                })
              }
            }
          )
        } else {
          return false
        }
      })
    },
    addPosition() {
      for (const i in this.dialogTemp.positionList) {
        if (this.dialogTemp.positionList[i].id === this.dialogTemp.positionTemp) {
          Message({
            message: '不能重复添加职位',
            type: 'error',
            duration: 1000
          })
          return
        }
      }
      for (const i in this.dialogTemp.positionList) {
        for (const j in this.positionOptions) {
          if (this.dialogTemp.positionList[i].id === this.positionOptions[j].value) {
            Message({
              message: '该成员已经在本社团任职，请删除旧的职位',
              type: 'error',
              duration: 1000
            })
            return
          }
        }
      }
      getPositionId(this.positionTemp).then(
        res => {
          const list = { positionList: this.dialogTemp.positionList }
          list.positionList.push(res.data.items)
          this.dialogTemp = Object.assign(list, this.dialogTemp)
          this.positionTemp = ''
        }
      )
    },
    deletePosition(index) {
      const list = { positionList: this.dialogTemp.positionList }
      console.log(list)
      list.positionList.splice(index)
      this.dialogTemp = Object.assign(list, this.dialogTemp)
    },
    toEditMode() {
      this.isEditMode = true
      this.editData = this.orgDetail
    },
    destroyDialog() {
      this.editData = {}
      this.isEditMode = false
    },
    handleCreate(type) {
      this.addType = type
      this.addDialogTitle = '添加参与' + (type === 'org' ? '社团' : '用户')
      this.addDialogFormVisible = true
    },
    handleAdd(row) {
      this.dialogTemp = Object.assign({}, row)
      this.dialogTemp['positionList'] = []
      this.dialogTemp['positionTemp'] = 0
      for (const i in this.dialogTemp.roles) {
        let j = 0
        for (;j < this.positionOptions.length; j++) {
          if (this.dialogTemp.roles[i].id === this.positionOptions[j].value) {
            this.dialogTemp.positionList.push({ id: this.dialogTemp.roles[i].id, name: this.dialogTemp.roles[i].role })
            break
          }
        }
        if (j >= this.positionOptions.length) {
          this.saveData.push({ id: this.dialogTemp.roles[i].id, name: this.dialogTemp.roles[i].role })
        }
      }
      this.positionDialogFormVisible = true
    },
    updateData() {
      this.addDialogFormVisible = false
      this.positionDialogFormVisible = false
      console.log(this.dialogTemp)
      const tempData = Object.assign({}, this.dialogTemp)
      for (const i in this.saveData) {
        tempData.positionList.push(this.saveData[i])
      }
      this.saveData = []
      updateMember(tempData).then(() => {
        this.fetchInfo()
        this.getMemberList()
        this.getExpUseList()
        this.initChart()
        this.$notify({
          title: 'Success',
          message: 'Update Successfully',
          type: 'success',
          duration: 2000
        })
      })
    },
    handleDelete(row, index, type) {
      this.deleteType = type
      this.deleteTemp = row.id
      console.log(row.id)
      this.deleteDialogFormVisible = true
    },
    deleteData() {
      deleteMember(this.id, this.deleteTemp).then(
        res => {
          if (res.status === 200) {
            this.$notify({
              title: 'Success',
              message: 'Update Successfully',
              type: 'success',
              duration: 800
            })
          }
          this.fetchInfo()
          this.getMemberList()
          this.deleteDialogFormVisible = false
        }
      )
    },
    cancelDelete() {
      this.deleteDialogFormVisible = false
    },
    initChart() {
      fetchOrgTotalUseChartData(this.id).then(
        res => {
          this.chartData.series[0].data = res.data.items
          this.chart = echarts.init(document.getElementById('chart'))
          this.chart.setOption(this.chartData)
        }
      )
    },
    formatMemberListJson(filterVal) {
      return this.memberList.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    },
    handleDownloadMemberList() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['#学号', '姓名', '性别', '班级', '职位', '状态']
        const filterVal = ['id', 'name', 'gender', 'uclass', 'position', 'status']
        const data = this.formatMemberListJson(filterVal)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: this.orgDetail.name + '成员列表'
        })
        this.downloadLoading = false
      })
    },
    formatUseListJson(filterVal) {
      return this.expUseList.map(v => filterVal.map(j => {
        if (j === 'date') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    },
    handleDownloadUseList() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['#编号', '报销人', '社团', '班级', '用途', '报销日期', '报销金额', '报销状态']
        const filterVal = ['id', 'username', 'orgName', 'reason', 'date', 'total', 'status']
        const data = this.formatUseListJson(filterVal)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: this.orgDetail.name + '报销列表'
        })
        this.downloadLoading = false
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .container-box{
    margin: 20px;
    padding: 30px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  }
  .basic-box{
    margin-top: 40px;
    padding: 30px 5%;
    border-radius: 10px;
    width: 100%;
  }
  .header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .left{
      width: 80%;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: flex-start;
      .cover{
        border-radius: 10px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
      }
    }
    .right{
      /*width: 20%;*/
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      /*margin-right: 20px;*/
      /*justify-content: flex-end;*/
    }
  }
  .cell{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin:10px;
    .title{
      font-size: 20px;
      font-weight:800;
      color: #11A983;
    }
    .title-edit{
      font-size: 20px;
      font-weight:800;
      color: #11A983;
      width: 150px;
    }
    .content{
      font-size: 20px;
      font-weight: 500;
      width: 300px;
    }
  }
  .summary{
    margin: 30px 40px;
    width: 90%;
    .summary-title{
      font-size: 25px;
      color: #2c3e50;
      font-weight: bolder;
    }
    .summary-content{
      margin-top: 20px;
      font-size: 20px;
    }
  }
  .table-title{
    font-weight: bolder;
    font-size: 25px;
    margin-bottom: 20px;
  }
  .form-item{
    display: flex;
    flex-direction: row;
    font-size: 20px;
    margin: 5px;
  }
  .form-label{
    font-weight: bold;
  }
  .form-value{
    color: #7d7d7f;
  }
  .el-icon-circle-plus-outline:hover{
    color: #5ec78f;
  }
  .el-icon-circle-plus-outline:active{
    color: #1a9b70;
  }
</style>
